<template>
  <div>
    <el-form ref="addFormRef" :rules="rules" :model="addForm.data" label-width="120">
      <el-row>
        <el-form-item label="上级菜单">
          <el-tree-select
            v-model="addForm.data.parentId"
            :props="defaultProps"
            :data="menuTreeList.data"
            check-strictly
            :render-after-expand="false"
            style="width: 760px"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="addForm.data.type">
            <el-radio v-for="item in typeList.data" :key="item.id" :value="item.id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="菜单图标" v-if="addForm.data.type != 'B'">
          <el-popover
            placement="bottom-start"
            :width="540"
            v-model:visible="showChooseIcon"
            trigger="click"
            @show="showSelectIcon"
          >
            <template #reference>
              <el-input
                v-model="addForm.data.icon"
                placeholder="点击选择图标"
                @blur="showSelectIcon"
                v-click-outside="hideSelectIcon"
                style="width: 320px"
                readonly
              >
                <template #prefix>
                  <svg-icon
                    v-if="addForm.data.icon"
                    :icon-class="addForm.data.icon"
                    class="el-input__icon"
                    style="height: 32px; width: 16px"
                  />
                  <el-icon v-else style="height: 32px; width: 16px">
                    <search />
                  </el-icon>
                </template>
              </el-input>
            </template>
            <icon-select ref="iconSelectRef" @selected="selected" />
          </el-popover>
        </el-form-item>
        <el-form-item label="跳转路径">
          <el-input
            v-model="addForm.data.redirect"
            placeholder="请输入跳转路径"
            style="width: 320px"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="菜单名称" prop="name">
            <el-input
              v-model="addForm.data.name"
              placeholder="请输入菜单名称"
              style="width: 320px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="显示排序" prop="sort">
            <el-input-number
              v-model="addForm.data.sort"
              placeholder="请输入选择排序"
              style="width: 320px"
              :min="1"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="组件路径" v-if="addForm.data.type == 'M'">
          <el-input
            v-model="addForm.data.component"
            placeholder="请输入组件路径"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item
          label="权限标识"
          v-if="addForm.data.type == 'M' || addForm.data.type == 'B'"
        >
          <el-input
            v-model="addForm.data.perm"
            placeholder="请输入权限标识"
            style="width: 320px"
          />
        </el-form-item>
      </el-row>
      <el-row v-if="addForm.data.type != 'B'">
        <el-col :span="11">
          <el-form-item label="显示状态" prop="visible">
            <el-radio-group v-model="addForm.data.visible">
              <el-radio v-for="item in visibleList.data" :key="item.id" :value="item.id">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="路由地址" prop="routePath">
            <el-input
              v-model="addForm.data.routePath"
              placeholder="请输入路由地址"
              style="width: 320px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <div class="footer">
          <div></div>
          <div>
            <el-button class="reset-btn" @click="resetForm(addFormRef)">重 置</el-button>
            <el-button class="confirm-btn" @click="submitForm(addFormRef)"
              >确 认</el-button
            >
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
// import { Plus, Delete, ZoomIn } from "@element-plus/icons-vue";
import { getMenuAdd, getUpload } from "../request.js";
// import SvgIcon from "@/components/svgIcon.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
// const icons = import.meta.glob("@/assets/image/svg/*.svg", { eager: true });
const emits = defineEmits(["operationDone"]);

const props = defineProps({
  operationId: {
    type: Object,
    default: () => {},
  },
  listData: {
    type: Object,
    default: () => {},
  },
});

console.log(props.operationId);

const defaultProps = {
  children: "nodes",
  label: "name",
  value: "id",
};

const addFormRef = ref("");
const addForm = reactive({
  data: {
    sort: 1,
    visible: 1,
    parentId: props.operationId.id,
  },
});

const rules = reactive({
  // parentId: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  // icon:[{required: true, message: "请选择菜单图标", trigger: "change"}],
  type: [{ required: true, message: "请选择菜单类型", trigger: "change" }],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
  visible: [{ required: true, message: "请选择菜单显示状态", trigger: "change" }],
  routePath: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
});


const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      getMenuAdd(addForm.data).then((res) => {
        if (res.data.code === 0) {
          ElMessage({
            type: "success",
            message: res.data.result,
          });
          emits("operationDone");
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    }
  });
};

const resetForm = async (formEl) => {
  if (!formEl) return;
  addForm.data = {
    sort: 1,
    status: 1,
  };
  addForm.data.type = typeList.data[0].id;
  formEl.resetFields();
};

const showChooseIcon = ref(false);
const iconSelectRef = ref(null);

/** 展示下拉图标 */
function showSelectIcon() {
  iconSelectRef.value.reset();
  showChooseIcon.value = true;
}
/** 选择图标 */
function selected(name) {
  addForm.data.icon = name;
  showChooseIcon.value = false;
}
/** 图标外层点击隐藏下拉列表 */
function hideSelectIcon(event) {
  var elem =
    event.relatedTarget || event.srcElement || event.target || event.currentTarget;
  var className = elem.className;
  if (className !== "el-input__inner") {
    showChooseIcon.value = false;
  }
}
const menuTreeList = reactive({
  data: [],
});

const typeList = reactive({
  data: [],
});

const visibleList = reactive({
  data: [
    {
      id: 1,
      name: "显示",
    },
    {
      id: 0,
      name: "隐藏",
    },
  ],
});

onMounted(() => {
  // setTimeout(() => {
  typeList.data = props.listData.typeList;
  menuTreeList.data = props.listData.menuTreeList;
  addForm.data.type = typeList.data[0].id;
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
